﻿@page
@namespace Web.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model IndexModel
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Contoso Photo Gallery</title>
</head>
<body class="bg-dark text-light">
    <nav class="navbar navbar-dark bg-dark">
        <span class="navbar-brand mb-0 h1">Contoso Photo Gallery</span>
    </nav>
    <div class="mx-5 mb-5">
        <div class="card">
            <div class="card-header text-dark">
                Upload a new image
            </div>
            <div class="card-body">
                <form method="post" enctype="multipart/form-data">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" asp-for="Upload">
                        <label class="custom-file-label">Choose image</label>
                    </div>
                    <button type="submit" class="btn btn-secondary">Upload</button>
                </form>
            </div>
        </div>
        <h1 class="display-1">
            Images
        </h1>
        @if (Model.ImageList.Count > 0)
        {
            <div class="card-columns">
                @foreach (string imageUrl in Model.ImageList)
                {
                    <div class="card">
                        <img src="@imageUrl" class="img-fluid" />
                    </div>
                }
            </div>
        }
        else
        {
            <div class="alert alert-warning" role="alert">
                No Images Found
            </div>
        }
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>